<template>
	<div class="personnelList">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/' }"><i class="lh lh-sys fw_100"></i></el-breadcrumb-item>
			<el-breadcrumb-item>系统设置</el-breadcrumb-item>
			<el-breadcrumb-item>需求发布规则</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="content_Box box-shadow mt_15">
			<div class="py_5 px_10">
				<el-row>
					<el-col :span="2">
						<el-button type="success" class="fl" @click="goToAdd()" round size="mini">新增需求发布规则</el-button>
					</el-col>
					<el-col :span="22">
						<el-form :inline="true" class="form-inline fr" @keyup.enter.native="shearchBtn()">
							<el-form-item class="w_80">
								<el-select v-model="city_arr" placeholder="城市" @change="changeBtndialog">
									<el-option
										v-for="item in cityList"
										:key="item.id"
										:label="item.city_name"
										:value="`${item.id}|${item.city_name}`"
									></el-option>
								</el-select>
							</el-form-item>
							<el-form-item class="w_80">
								<el-select v-model="area_arr" placeholder="请选择" @change="changeBtndialogarea">
									<el-option
										v-for="item in areaList"
										:key="item.id"
										:label="item.area_name"
										:value="`${item.id}|${item.area_name}`"
									></el-option>
								</el-select>
							</el-form-item>
							<el-form-item class="w_80">
								<el-autocomplete
									class="inline-input"
									v-model="shop_name"
									:fetch-suggestions="querySearch"
									placeholder="店铺名称"
									:trigger-on-focus="true"
									@select="handleSelect"
								></el-autocomplete>
							</el-form-item>
							<el-button size="mini" type="primary" native-type="button" class="round-right" @click="shearchBtn"
								>搜索</el-button
							>
							<el-button size="mini" round @click="resetBtn">重置</el-button>
						</el-form>
					</el-col>
				</el-row>
			</div>
			<div class="tableMaxBox">
				<template>
					<el-table :data="demandList" stripe>
						<el-table-column prop="id" label="规则编号" width="90"></el-table-column>
						<el-table-column prop="config" label="规则">
							<template slot-scope="{ row, $index }">
								<span class="pointer"
									>{{ row.config[0].start_hour | ReversalTime }}-{{ row.config[0].end_hour | ReversalTime }}可创建{{
										row.config[0].space_hour
									}}小时后的需求</span
								>
								<span v-if="row.config.length > 1">......</span>
							</template>
						</el-table-column>
						<el-table-column prop="city_name" label="城市" width="60px"></el-table-column>
						<el-table-column prop="area_name" label="商圈" width="100"></el-table-column>
						<el-table-column prop="shop_name" label="店铺"></el-table-column>
						<el-table-column prop="add_time" label="创建时间" width="90"></el-table-column>
						<el-table-column prop="creater_name" label="创建人" width="90"></el-table-column>
						<el-table-column label="操作" width="200px" fixed="right">
							<template slot-scope="{ row, $index }">
								<el-link type="info" class="InfoFont text-primary" @click="goToTag(row)">修改</el-link>
								<el-link type="info" class="InfoFont text-danger">删除</el-link>
							</template>
						</el-table-column>
					</el-table>
					<!-- 分页组件 -->
					<page :total="total" :pageNums="pageNum" @pagedata="onChildValue"></page>
				</template>
			</div>
		</div>
		<!-- 新增状态-弹框 -->
		<el-dialog :title="diaTitle" :visible.sync="DemandAdd" width="900px" :close-on-click-modal="false">
			<div class="auditCentent">
				<div class="row-info clear rateBox">
					<div class="fl title-key" style="line-height: 48px;">创建时间在</div>
					<div class="fl list-cont">
						<el-table :data="signRateArr" border :show-header="false" style="width: 100%;">
							<el-table-column label width="320px">
								<template v-slot="scope">
									<p class="p_area">
										<el-time-select
											v-model="scope.row.start_hour"
											:picker-options="{
												start: '00:00',
												step: '00:30',
												end: '24:00'
											}"
											placeholder
										></el-time-select>
										<span>至</span>
										<el-time-select
											v-model="scope.row.end_hour"
											:picker-options="{
												start: '00:00',
												step: '00:30',
												end: '24:00'
											}"
											placeholder
										></el-time-select>
									</p>
								</template>
							</el-table-column>
							<el-table-column label width="300px">
								<template v-slot="scope">
									<p class="p_ratios">
										<span class="mr_5 fl l-h-30">可创建</span>
										<el-input v-model="scope.row.space_hour" class="fl" placeholder></el-input>
										<span class="ml_5 fl l-h-30">小时后的需求（用工时间）</span>
									</p>
								</template>
							</el-table-column>
							<el-table-column label width="140px">
								<template v-slot="scope">
									<span
										v-if="scope.$index == signRateArr.length - 1"
										style="color: #3389fe;"
										class="curs pointer"
										@click="addInterval(scope.$index)"
										>添加（最多添加6条）</span
									>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key">执行城市</div>
					<div class="fl list-cont">
						<el-select v-model="city_arr" placeholder="请选择" @change="changeBtndialog">
							<el-option
								v-for="item in cityList"
								:key="item.id"
								:label="item.city_name"
								:value="`${item.id}|${item.city_name}`"
							></el-option>
						</el-select>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key">执行商圈</div>
					<div class="fl list-cont">
						<el-select v-model="area_arr" placeholder="请选择" @change="changeBtndialogarea">
							<el-option
								v-for="item in areaList"
								:key="item.id"
								:label="item.area_name"
								:value="`${item.id}|${item.area_name}`"
							></el-option>
						</el-select>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key">执行店铺</div>
					<div class="fl list-cont">
						<el-autocomplete
							class="inline-input"
							v-model="shop_name"
							:fetch-suggestions="querySearch"
							placeholder="店铺名称"
							:trigger-on-focus="true"
							@select="handleSelect"
						></el-autocomplete>
					</div>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<span class="btnOK mr_20" @click="addMenuBtnAdd()">确 定</span>
				<span class="resetBtn" @click="hideall()">取 消</span>
			</div>
		</el-dialog>
		<!-- 修改状态-弹框 -->
		<el-dialog :title="diaTitle" :visible.sync="DemandEdit" width="900px" :close-on-click-modal="false">
			<div class="auditCentent">
				<div class="row-info clear rateBox">
					<div class="fl title-key" style="line-height: 48px;">创建时间在</div>
					<div class="fl list-cont">
						<el-table :data="signRateArr" border :show-header="false" style="width: 100%;">
							<el-table-column label width="320px">
								<template v-slot="scope">
									<p class="p_area">
										<el-time-select
											v-model="scope.row.start_hour"
											:picker-options="{
												start: '00:00',
												step: '00:30',
												end: '24:00'
											}"
											placeholder
										></el-time-select>
										<span>至</span>
										<el-time-select
											v-model="scope.row.end_hour"
											:picker-options="{
												start: '00:00',
												step: '00:30',
												end: '24:00'
											}"
											placeholder
										></el-time-select>
									</p>
								</template>
							</el-table-column>
							<el-table-column label width="300px">
								<template v-slot="scope">
									<p class="p_ratios">
										<span class="mr_5 fl l-h-30">可创建</span>
										<el-input v-model="scope.row.space_hour" class="fl" placeholder></el-input>
										<span class="ml_5 fl l-h-30">小时后的需求（用工时间）</span>
									</p>
								</template>
							</el-table-column>
							<el-table-column label width="140px">
								<template v-slot="scope">
									<span
										v-if="scope.$index == signRateArr.length - 1"
										style="color: #3389fe;"
										class="curs pointer"
										@click="addInterval(scope.$index)"
										>添加（最多添加6条）</span
									>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key">执行城市</div>
					<div class="fl list-cont">
						<el-select v-model="city_arr" placeholder="请选择" @change="changeBtndialog">
							<el-option
								v-for="item in cityList"
								:key="item.id"
								:label="item.city_name"
								:value="`${item.id}|${item.city_name}`"
							></el-option>
						</el-select>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key">执行商圈</div>
					<div class="fl list-cont">
						<el-select v-model="area_arr" placeholder="请选择" @change="changeBtndialogarea">
							<el-option
								v-for="item in areaList"
								:key="item.id"
								:label="item.area_name"
								:value="`${item.id}|${item.area_name}`"
							></el-option>
						</el-select>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key">执行店铺</div>
					<div class="fl list-cont">
						<el-autocomplete
							class="inline-input"
							v-model="shop_name"
							:fetch-suggestions="querySearch"
							placeholder="店铺名称"
							:trigger-on-focus="true"
							@select="handleSelect"
						></el-autocomplete>
					</div>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<span class="btnOK mr_20" @click="EditMenuBtnAdd()">确 定</span>
				<span class="resetBtn" @click="hideall()">取 消</span>
			</div>
		</el-dialog>
	</div>
</template>

<script>
var common = require('../../../static/tool.js')
import { mainfun } from '../../../assets/js/main.js'
export default {
	name: 'ShopList',
	data() {
		return {
			id: '',
			dataMes: '',
			ids: '',
			agreement: '',
			index: '',
			windowSizeHeight: document.documentElement.clientHeight, //浏览器可视化窗口的大小
			screenHeight: document.documentElement.clientHeight,
			manageInfo: JSON.parse(sessionStorage.getItem('manageInfo')), //登录信息
			url: common.url,
			head_url: common.head_url,
			//搜索对应值
			business_id: '', //所属商户ID
			business_name: '', //所属商户name

			activation: '', //激活状态：1:未激活  2:已激活
			status: '', //账号状态： 1:正常  2:禁用

			demandList: [], //店铺列表
			diaTitle: '', //弹框title
			DemandAdd: false, //新增弹框
			DemandEdit: false, //修改弹框
			//向分页组件传值
			total: 0,
			pageNum: '',
			pageSizeNow: '',
			// 审核状态
			tag: '30',
			text: '',
			cityList: [], //城市列表
			city_arr: '',
			city_id: '',
			city_name: '',
			areaList: [], //区域列表
			area_arr: '',
			area_id: '',
			area_name: '',
			shopList: [], //店铺列表
			shop_id: '', //店铺id
			shop_name: '', //店铺名
			//动态表格式
			signRateArr: [
				{
					start_hour: '',
					end_hour: '',
					space_hour: ''
				}
			]
		}
	},
	created() {
		if (this.$route.query.id) {
			this.id = this.$route.query.id //接收传参
			this.business_id = this.id
		}
		if (!sessionStorage.getItem('manageInfo')) {
			// 判断是否登录
			window.location = 'login.html'
			return
		}
		this.getcityList()
		this.listArea()
	},
	mounted() {
		this.listUser() //店铺列表
	},
	methods: {
		listUser() {
			//获取商铺列表
			// let fn = new FormData()
			// this.$http.post(this.url + '/shop/list', fn).then(
			// 	res => {
			// 		// console.log(res.data.data);
			// 		if (res.data.msg == '查询成功' || res.data.code == '200') {
			// 			if (res.data.data != null) {
			// 				res.data.data.list.forEach(item => {
			// 					item.value = item.name
			// 				})
			// 				this.shopList = res.data.data.list
			// 				this.total = res.data.data.count
			// 			} else {
			// 				this.shopList = []
			// 				this.total = 0
			// 			}
			// 		} else if (res.data.code == '8886') {
			// 			//code   8886  登录过期
			// 			sessionStorage.clear()
			// 			this.$alert('登录已过期，请重新登录 !', '提示', {
			// 				confirmButtonText: '确定',
			// 				callback: action => {
			// 					window.location = 'login.html'
			// 				}
			// 			})
			// 			return
			// 		} else {
			// 			this.$message.error(res.data.msg)
			// 			return
			// 		}
			// 	},
			// 	res => {
			// 		this.$message.error('网络错误！')
			// 		return
			// 	}
			// )

			let fn = new FormData()
			fn.append('sign_status', 30) //已合作的店铺
			fn.append('status', 1) //启用的店铺
			// fn.append("search_list", 1); //不进行分页
			this.$http.post(this.url + '/shop/getListForSearch', fn).then(
				res => {
					// console.log(res.data.data);
					if (res.data.msg == '查询成功' || res.data.code == '200') {
						if (res.data.data != null) {
							res.data.data.list.forEach(item => {
								item.value = item.name
							})
							this.shopList = res.data.data.list
							this.total = res.data.data.count
						} else {
							this.shopList = []
							this.total = 0
						}
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		listShop() {
			//获取需求发布规则列表
			let fn = new FormData()
			fn.append('area_id', this.area_id)
			if (this.shop_name == '') {
				this.shop_id = ''
			}
			fn.append('shop_id', this.shop_id)
			fn.append('city_id', this.city_id)

			this.$http.post(this.url + '/rule/demandList', fn).then(
				res => {
					console.log(res.data.data)
					if (res.data.msg == '查询成功！' || res.data.code == '200') {
						if (res.data.data != null) {
							this.demandList = res.data.data.list
							this.total = res.data.data.count
						} else {
							this.demandList = []
							this.total = 0
						}
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		//获取城市列表
		getcityList() {
			let fn = new FormData()
			this.$http.post(this.url + '/city/list', fn).then(
				res => {
					if (res.data.msg == '查询成功' || res.data.code == '200') {
						this.cityList = res.data.data.list
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		//获取商圈列表
		listArea() {
			let fn = new FormData()
			this.$http.post(this.url + '/area/list', fn).then(
				res => {
					if (res.data.msg == '查询成功' || res.data.code == '200') {
						if (res.data.data != null) {
							res.data.data.list.forEach(item => {
								item.value = item.area_name
							})
							this.areaList = res.data.data.list
						} else {
							this.areaList = []
							this.total = 0
						}
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},

		changeBtndialog() {
			let [id, name] = this.city_arr.split('|') // es6 数组解构赋值
			this.city_id = id.toString()
			this.city_name = name.toString()
		},

		changeBtndialogarea() {
			let [id, name] = this.area_arr.split('|') // es6 数组解构赋值
			this.area_id = id.toString()
			this.area_name = name.toString()
		},

		shearchBtn() {
			// 搜索
			this.pageNum = 1
			this.listShop()
		},

		resetBtn() {
			//重置
			this.resetDataAdd() //重置请求数据
			this.pageNum = 1
			this.listShop()
		},

		// 点击弹框的取消按钮
		hideall() {
			this.DemandEdit = false
			this.DemandAdd = false
			this.resetDataAdd()
		},

		resetDataAdd() {
			this.city_arr = ''
			this.city_id = ''
			this.city_name = ''
			this.area_arr = ''
			this.area_id = ''
			this.area_name = ''
			this.shop_id = ''
			this.shop_name = ''
			this.signRateArr = [
				{
					start_hour: '',
					end_hour: '',
					space_hour: ''
				}
			]
		},

		goToEdit(row) {
			//编辑页面
			this.$router.push({
				path: '/merchantsEdit',
				query: {
					id: row.id
				}
			})
		},

		goToAdd() {
			this.resetDataAdd()
			//新增需求发布规则-弹框
			this.DemandAdd = true
			this.diaTitle = '新增需求发布规则'
		},

		goToTag(row) {
			this.resetDataAdd()
			//修改需求发布规则-弹框
			this.ids = row.id
			this.DemandEdit = true
			this.diaTitle = '修改需求发布规则'
			// 详情查询
			let fn = new FormData()
			fn.append('id', row.id)
			this.$http.post(this.url + '/rule/demandInfo', fn).then(
				res => {
					if (res.data.msg == '查询成功！' || res.data.code == '200') {
						if (res.data.data != null) {
							var message = res.data.data
							this.city_arr = message.city_id + '|' + message.city_name
							this.city_id = message.city_id.toString()
							this.city_name = message.city_name
							this.area_arr = message.area_id + '|' + message.area_name
							this.area_id = message.area_id.toString()
							this.area_name = message.area_name
							this.shop_id = message.shop_id
							this.shop_name = message.shop_name
							if (message.config.length > 0) {
								// 时间段的格式转化
								var arrss = message.config
								arrss.forEach(item => {
									item.start_hour = common.getReversalTime(item.start_hour)
									item.end_hour = common.getReversalTime(item.end_hour)
								})
								// console.log(arrss);
								this.signRateArr = arrss
							} else {
								this.signRateArr = [
									{
										start_hour: '',
										end_hour: '',
										space_hour: ''
									}
								]
							}
						} else {
						}
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},

		//店铺的自动完成
		querySearch(queryString, cb) {
			var restaurants = this.shopList
			var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
			// 调用 callback 返回建议列表的数据
			cb(results)
		},
		createFilter(queryString) {
			return restaurant => {
				return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
			}
		},
		handleSelect(item) {
			// console.log(item);
			this.shop_id = item.id
		},
		//添加规则
		addMenuBtnAdd() {
			let fn = new FormData()
			fn.append('area_id', this.area_id)
			if (this.shop_name == '') {
				this.shop_id = ''
			}
			fn.append('shop_id', this.shop_id)
			fn.append('city_id', this.city_id)
			// 时间段的格式转化
			var arrs = this.signRateArr
			arrs.forEach(item => {
				item.start_hour = Number(common.getConvertTime(item.start_hour))
				item.end_hour = Number(common.getConvertTime(item.end_hour))
				item.space_hour = Number(item.space_hour)
			})
			fn.append('config', JSON.stringify(arrs))

			this.$http.post(this.url + '/rule/demandAdd', fn).then(
				res => {
					// console.log(res);
					if (res.data.msg == '操作成功！' || res.data.code == '200') {
						this.$message.success(res.data.msg)
						this.listShop()
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
			this.DemandAdd = false //关闭弹框
			// 重置弹出层的内容
			this.resetDataAdd()
		},
		//修改规则
		EditMenuBtnAdd() {
			let fn = new FormData()
			fn.append('id', this.ids)
			fn.append('area_id', this.area_id)
			if (this.shop_name == '') {
				this.shop_id = ''
			}
			fn.append('shop_id', this.shop_id)
			fn.append('city_id', this.city_id)

			// fn.append("config", JSON.stringify(this.signRateArr));
			// 时间段的格式转化
			var arrs = this.signRateArr
			arrs.forEach(item => {
				item.start_hour = Number(common.getConvertTime(item.start_hour))
				item.end_hour = Number(common.getConvertTime(item.end_hour))
				item.space_hour = Number(item.space_hour)
			})
			fn.append('config', JSON.stringify(arrs))

			this.$http.post(this.url + '/rule/demandAdd', fn).then(
				res => {
					// console.log(res);
					if (res.data.msg == '操作成功！' || res.data.code == '200') {
						this.$message.success(res.data.msg)
						this.listShop()
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
			this.DemandEdit = false //关闭弹框
			// 重置弹出层的内容
			this.resetDataAdd()
		},
		//分页组件->子组件传值
		onChildValue(item) {
			this.pageNum = item[0]
			this.pageSizeNow = item[1]
			this.listShop()
		},
		//审核弹框
		goToDemandAdd(e) {
			this.ids = e.id
			this.DemandAdd = true
			this.diaTitle = '审核'
		},
		//协议弹框
		goToXieYi(e) {
			this.ids = e.id
			this.agreement = e.agreement
			this.PersonnelXieYi = true
			this.diaTitle = '协议'
		},
		//添加区间
		addInterval(index) {
			if (this.signRateArr.length == 6) {
				this.$message({
					message: '至多六个区间',
					type: 'warning'
				})
				return
			}
			this.signRateArr.push({
				start_hour: '',
				end_hour: '',
				space_hour: ''
			})
		}
	},
	filters: {
		ReversalTime: function (value) {
			value = value % 24
			return common.getReversalTime(value)
		}
	}
}
</script>

<style scoped>
.search_box {
	width: 790px;
}
.auditCentent .labels {
	min-height: 100px;
}
.auditCentent .labels .labels_label {
	float: left;
	cursor: pointer;
}
.check_label {
	background: var(--purple4);
	color: #fff;
	border: none;
}
.pdf {
	width: 860px;
	height: 600px;
}
.main_user {
	background: var(--zfy-red);
	color: #fff;
	text-decoration: none;
	padding: 2px 4px;
	border-radius: 4px;
}
.row-info {
	padding: 10px 0;
}
@media (max-width: 767.78px) {
	.titleBox {
		height: 40px;
	}
}
</style>



// WEBPACK FOOTER //
// src/components/demand/List.vue